<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
     <%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
	<link href="/font/css/style.css" rel="stylesheet" type="text/css" />
    <link href="/font/css/common.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        .fmright{
           float: left;
		margin-left: 150px;
		margin-top: 30px;
        }
        #bg{	display:none;
				position: absolute; 
				top: 0%;  left: 0%;  
				width: 100%;  height: 100%;  
				background-color: black;  
				z-index:1001;  -moz-opacity: 0.7;  opacity:.70; filter: alpha(opacity=70);
		}
        #edit{	 display:none;
				position: absolute;  
				top: 25%;  left: 30%;  
				width: 32%;  
				height: 33%;  
				padding: 8px;  
				border: 8px solid #E8E9F7; 
				background-color: white;  
				z-index:1002;  
				overflow: auto;}
		#edit h2{
			text-align: center;
			font-size: 20px;
		}
		.in{
			margin-left: 10px;
			width: 400px;
		}
		.btn{
			height: 50px;
			width: 100px;
			margin: 20px;
			margin-left: 50px;
			font-size: 15px;
		}
    </style>
    <script type="text/javascript" src="/font/js/jquery-2.1.3.min.js"></script>
    <script>
    	$(function(){
    		$("#but").click(function(){
    			$("#bg").show();
    			$("#edit").show();
    		});
    		$("#exit").click(function(){
    			$("#bg").hide();
    			$("#edit").hide();
    		});
			$("#idcard").blur(function(){
				var idcard=$(this).val();
				
				$.ajax({  
			        type:"POST",  
			        url:"/GetcidServlet",  
			        data:{  
			        	"idcard":idcard	   	
			        },  
			        dataType:"json",  
			        success:function (data) {  
			        	if(data==0){
			        		alert("联系人已存在")
			        		btn=document.getElementById('st');
			        		btn.disabled=true;
			        	}else{
			        		alert("可以添加")
			        		btn=document.getElementById('st');
			        		btn.disabled=false;
			        	}
			        },
			        error:function(){
			        	alert(错误)
			        }
			    }) 
			});
			
			
    	});
    </script>
    <script type="text/javascript">
    /*******验证联系人名********/
    function checkTrueName(){
    	
    	var strTName=document.getElementById("name").value;
    	var divName=document.getElementById("A1");
    	divName.style.display="inline";
    	if(strTName==""){
    		divName.innerHTML="<font color='red'>联系人姓名不能为空</font>";
    		return false;
    	}
    	var reg=/^[\u4E00-\u9FA5]{2,4}$/;
    	if(!reg.test(strTName)){
    		divName.innerHTML="<font color='red'>联系人姓名中只能用2-4汉字组成！</font>";
    		return false;
    	}else{
    		divName.innerHTML="<font color='green'>您填写的真实姓名符合要求！</font>";	
    	}
    	return true;
    }

    /************验证身份证号************/
    function checkIDCard(){
    	
    	var strCard=document.getElementById("idcard").value;
    	var divName=document.getElementById("A2");
    	divName.style.display="inline";
    	if(strCard==""){
    		divName.innerHTML="<font color='red'>身份证号不能为空</font>";
    		return false;
    	}
    	var reg=/^[1-9][0-9]{5}(19|20)[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|31)|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}([0-9]|x|X)$/;
    	if(!reg.test(strCard)){
    		divName.innerHTML="<font color='red'>不符合中国身份证格式！</font>";
    		return false;
    	}else{
    		divName.innerHTML="<font color='green'>您填写的身份证号符合要求！</font>";	
    	}
    	return true;
    }
    function All(){
    	var strTName=document.getElementById("name").value;
    	var strCard=document.getElementById("idcard").value;
    	
    	if(checkTrueName(name)&&checkIDCard(idcard)){
    		alert("操作成功")
    		return true;
    	}else{
    		alert("操作失败")
    		return false;
    	}
    }
 
    

    </script>
</head>
<body>
	 <div class="fmright">
        	<div class="fmr1">
            	<div class="fmr1_top">常用联系人</div>
                <div class="fmr1_m">
                    <p class="fp3">
                    	<table border="0" cellpadding="0" cellspacing="0" width="638">     
                    	              
                            <tr>
                            	<th width="200" align="left" height="30">姓名</th>
                                <th width="578" align="left" height="30">证件号 </th>
                                <th width="170">操作|&nbsp;<a id="but">新增购票人</a></th>
                            </tr>
                             <c:forEach items="${list }" var="v">
                            <tr>
<%--                             <c:forEach items="${list }" var="v"> --%>
                            	<td width="100" align="left" height="30">${v.cname }</td>
                                <td width="578" align="left" height="30">${v.cidcard} </td>
                                <td width="120" style="text-align: center;"><span class="fspan9"><a href="${pageContext.request.contextPath}/DelContServlet?cname=${v.cname}" onclick="return confirm('是否删除');">[删除]</a></span></td>
                                
                            </c:forEach>
                            </tr>  
                        </table>           
                </div>
            </div>
        </div>
        <div id="bg"></div>
        <div id="edit">
        	<form action="${pageContext.request.contextPath}/AddContServlet" method="post" onsubmit="return All()">
        			<h2>新增联系人</h2>
        		<p>姓名:</p><input type="text" name="name" id="name" class="in" placeholder="请输入联系人姓名" onblur="checkTrueName()"><br>
        		  <div id="A1" style="background-color: #FFF;display:none"></div>
        		<p>证件号:</p><input type="text" name="idcard" id="idcard" class="in" placeholder="请输入联系人证件号" onblur="checkIDCard()"><br>
        		  <div id="A2" style="background-color: #FFF;display:none"></div><span id="msg"></span><br>
        		<input type="submit" value="确认" class="btn" id="st"><input type="button" id="exit" value="取消" class="btn">
        	</form>
        </div>
</body>
</html>
